    @import "mixin.scss";
    @import "var.scss";
    html,
    body {
      height: 100%;
    }
    
    input {
      border: none;
    }
    
    .pd-tb-30 {
      padding-top: r(30);
      padding-bottom: r(30);
    }
    
    .clear:after {
      display: block;
      height: 0;
      content: "";
      clear: both
    }
    
    .fl {
      float: left
    }
    
    .fr {
      float: right
    }
    
    .no-pt {
      padding-top: 0!important
    }
    
    .no-pb {
      padding-bottom: 0!important
    }
    
    .no-bt {
      margin-bottom: 0!important
    }
    
    .no-mr {
      margin-right: 0!important;
    }
    
    .no-ml {
      margin-left: 0!important;
    }
    
    .ml-48 {
      margin-left: r(48);
    }
    
    .mr-48 {
      margin-right: r(48);
    }
    
    .ml-64 {
      margin-left: r(64);
    }
    
    .m-48 {
      margin-left: r(48);
      margin-right: r(48);
    }
    
    .p-27 {
      padding-left: r(27);
      padding-right: r(27);
    }
    
    .pl-30 {
      padding-left: r(30);
    }
    
    .pl-48 {
      padding-left: r(48);
    }
    
    .pl-45 {
      padding-left: r(45);
    }
    
    .pt-60 {
      padding-top: r(60);
    }
    
    .pb-48 {
      padding-bottom: r(48);
    }
    
    .pr-30 {
      padding-right: r(30);
    }
    
    .p-30 {
      padding-left: r(30);
      padding-right: r(30);
    }
    
    .p-48 {
      padding-left: r(48);
      padding-right: r(48);
    }
    
    .pt-312 {
      padding-top: r(312);
    }
    
    .m-30 {
      margin-left: r(30);
      margin-right: r(30);
    }
    
    .mt-30 {
      margin-top: r(30);
    }
    
    .mt-48 {
      margin-top: r(48);
    }
    
    .bg-gary {
      background-color: $bg-gary-g;
    }
    
    .bg-white {
      background-color: $bg-white;
    }
    
    .bg-orange {
      background-color: $bg-orange;
    }
    
    .bg-red {
      background-color: $bg-red;
    }
    
    .border-b-gary {
      border-bottom: r(2) solid $border-gary;
    }
    
    .scroll {
      overflow: auto;
    }
    
    // vue 渲染闪烁
    [v-cloak] {
      display: none!important;
    }
    
    .icon-back-product {
      @include bg("../../dist/img/back_arr.png");
      width: r(60);
      height: r(60);
    }
    
    .icon-category-product {
      @include bg("../../dist/img/category.png");
      width: r(48);
      height: r(31);
    }
    
    .icon-shop-temp-love {
      @include bg("../../dist/img/shoucang.png");
      width: r(39);
      height: r(37);
    }
    
    .icon-address {
      @include bg("../../dist/img/address.png");
      width: r(37);
      height: r(44);
    }
    
    .icon-share-product {
      @include bg("../../dist/img/share.png");
      width: r(60);
      height: r(60);
    }
    
    .icon-welfare-ticket {
      @include bg("../../dist/img/welfare_ticket.png");
      width: r(192);
      height: r(39);
    }
    
    .icon-more-btn {
      @include bg("../../dist/img/more_btn.png");
      width: r(54);
      height: 100%;
    }
    
    .icon-ratign {
      @include bg("../../dist/img/comment_rating.png");
      width: r(30);
      height: r(30);
    }
    
    .icon-connect {
      @include bg("../../dist/img/connect.png");
      width: r(54);
      height: r(54);
    }
    
    .icon-vendor-shop {
      @include bg("../../dist/img/shop.png");
      width: r(54);
      height: r(55);
    }
    
    .icon-ft-fixed-connect {
      @include bg("../../dist/img/ft_connect.png");
      width: r(48);
      height: r(48);
    }
    
    .icon-ft-fixed-shop {
      @include bg("../../dist/img/ft_shop.png");
      width: r(48);
      height: r(48);
    }
    
    .icon-ft-fixed-favor {
      @include bg("../../dist/img/ft_favor.png");
      width: r(50);
      height: r(50);
    }
    
    .icon-cart-product {
      @include bg("../../dist/img/top_nav_cart.png");
      width: r(59);
      height: r(54);
    }
    
    .icon-msg-product {
      @include bg("../../dist/img/top_nav_msg.png");
      width: r(60);
      height: r(60);
    }
    
    .lay-wrap {
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      .layer {
        background-color: rgba(0, 0, 0, .7);
        height: 100%;
        width: 100%;
        position: fixed;
        left: 0;
        right: 0;
      }
    }
    
    // 展示更多信息的底部弹出框
    .popBox-moreInfoItems {
      z-index: 10000;
      height: r(1158);
      width: 100%;
      bottom: 0;
      left: 0;
      position: absolute;
      overflow: auto;
      .hd {
        display: flex;
        height: r(165);
        align-items: center;
        z-index: 10000;
        width: 100%;
        h1 {
          font-size: r(42);
          color: $fc-title-gary;
          font-weight: normal;
          text-align: center;
          width: 100%;
        }
        em {
          position: absolute;
          right: 0;
          top: 0;
          width: r(100);
          height: r(100);
          display: block;
          i {
            @include bg('../../dist/img/popBox_close.png');
            width: r(32);
            height: r(32);
            position: absolute;
            right: r(30);
            bottom: 0;
            background-size: 100% auto;
            background-position: center bottom;
          }
        }
      }
      .bd {
        max-height: r(855);
        overflow: auto;
        .item-wrap {
          .item {
            display: flex;
            padding-bottom: r(47);
            padding-top: r(47);
            border-bottom: r(2) solid $border-gary;
            &:first-child {
              padding-top: 0;
            }
            .tag {
              width: r(72);
              height: r(39);
              background-color: $bg-light-red;
              color: $fc-red;
              text-align: center;
              line-height: r(39);
              font-size: r(30);
              flex-shrink: 0;
              &.gray {
                color: $fc-gary;
                background-color: $bg-gary;
              }
            }
            .con {
              font-size: r(42);
              color: $fc-base;
              margin-left: r(30);
            }
          }
        }
      }
      .ft {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        span {
          height: r(138);
          display: block;
          width: 100%;
          background-color: $bg-red;
          color: $fc-white;
          text-align: center;
          line-height: r(138);
          font-size: r(48);
          &:active {
            background-color: #d2002c;
          }
        }
      }
    }
    
    .popBox-moreInfoLists {
      @extend .popBox-moreInfoItems;
      .item {
        border-bottom: none!important;
        padding-top: 0!important;
      }
    }
    
    .popBox-tickets {
      @extend .popBox-moreInfoItems;
      .ticket-list {
        .item {
          height: r(300);
          display: flex;
          margin-bottom: r(30);
          .item-l {
            width: r(373);
            @include bg("../../dist/img/popBox_ticket.png");
            display: flex;
            flex-direction: column;
            color: $fc-white;
            justify-content: center;
            text-align: center;
            .money {
              font-size: r(140);
              em {
                font-style: normal;
                font-size: r(50);
                margin-right: r(18);
              }
            }
            .tips {
              font-size: r(36);
            }
          }
          .item-r {
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-around;
            padding-left: r(28);
            background: $bg-white url("../../dist/img/popBox_ticket_tag.png") no-repeat top right/r(99) r(77);
            .warn {
              font-size: r(42);
              color: $fc-base;
            }
            .time-tips {
              font-size: r(36);
              color: $fc-gary;
            }
            .time {
              @extend .time-tips;
            }
          }
        }
      }
    }
    
    .popBox-guarantee {
      @extend .popBox-moreInfoItems;
      .guarantee-list {
        .item {
          padding-bottom: r(40);
          h1 {
            font-size: r(42);
            color: $fc-base;
            font-weight: normal;
          }
          p {
            font-size: r(36);
            color: $fc-title-gary;
            line-height: r(66);
          }
        }
      }
    }
    
    .popBox-moreInfoParams {
      @extend .popBox-moreInfoItems;
      .tag {
        width: r(182)!important;
        height: auto!important;
        font-size: r(42)!important;
        color: $fc-base!important;
        background: none!important;
        display: flex;
        align-items: center;
        line-height: r(60)!important;
      }
      .con {
        display: flex;
        align-items: center;
        line-height: r(60)!important;
      }
    }
    
    .popBox-selParams {
      z-index: 10000;
      width: 100%;
      bottom: 0;
      left: 0;
      position: absolute;
      .hd {
        width: 100%;
        height: r(205);
        display: flex;
        border-bottom: r(2) solid $border-gary;
        .hd-l {
          width: r(268);
          height: r(262);
          border: r(2) solid $border-gary;
          border-radius: r(25);
          overflow: hidden;
          margin-top: r(-60);
          img {
            display: block;
            width: 100%;
          }
        }
        .hd-r {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .price {
            font-size: r(48);
            color: $fc-red;
            line-height: r(52);
            margin-bottom: r(16);
            span {
              font-size: r(36);
              color: $fc-gary;
            }
          }
          .id {
            font-size: r(36);
            color: $fc-gary;
            line-height: r(52);
          }
          .remain {
            @extend .id;
          }
        }
      }
      .bd {
        max-height: r(1040);
        overflow: auto;
      }
      .zone-title {
        width: 100%;
        height: r(90);
        display: flex;
        align-items: center;
        font-size: r(36);
        color: $fc-title-gary;
        background-color: $bg-gary-g;
        margin-bottom: r(60);
      }
      .zone-wrap {
        h1 {
          font-weight: normal;
          font-size: r(42);
          color: $fc-gary;
          line-height: r(52);
          margin-bottom: r(25);
        }
        .mainList {
          display: flex;
          flex-wrap: wrap;
          li {
            width: r(206);
            height: r(84);
            border: r(2) solid $border-gary-dark;
            border-radius: r(15);
            flex-shrink: 0;
            text-align: center;
            line-height: r(84);
            font-size: r(42);
            color: $fc-base;
            margin-bottom: r(35);
            margin-right: r(44);
            &:nth-child(4n) {
              margin-right: 0;
            }
            &.cur {
              border: r(2) solid $border-red;
              color: $fc-red;
            }
          }
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          li {
            width: r(206);
            height: r(84);
            flex-shrink: 0;
            margin-bottom: r(35);
            margin-right: r(44);
            list-style: none;
            position: relative;
            &:nth-child(4n) {
              margin-right: 0;
            }
            .label {
              border: r(2) solid $border-gary-dark;
              display: block;
              width: 100%;
              height: 100%;
              border-radius: r(15);
              text-align: center;
              line-height: r(84);
              font-size: r(42);
              color: $fc-base;
            }
            .radioSel {
              position: absolute;
              width: 100%;
              height: 100%;
              opacity: 0;
              &.cur {
                &+.label {
                  border: r(2) solid $border-red;
                  color: $fc-red;
                }
              }
            }
          }
        }
        .imgSel {
          display: flex;
          flex-wrap: wrap;
          margin-top: r(28);
          .item {
            flex-shrink: 0;
            position: relative;
            width: r(202);
            height: r(202);
            margin-right: r(42);
            img {
              display: block;
              width: 100%;
            }
            input {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              appearance: none;
              opacity: 0;
              z-index: 100;
              &:checked {
                &~.circle {
                  background: $bg-red url("../../dist/img/dz_check.png") no-repeat center center/r(24) r(19);
                  border-color: $border-red;
                }
              }
            }
            span {
              position: absolute;
              left: 0;
              bottom: 0;
              font-size: r(30);
              color: $fc-white;
              background: rgba(0, 0, 0, .4);
              width: 100%;
              height: r(48);
              line-height: r(48);
              text-indent: r(12);
            }
            .circle {
              width: r(40);
              height: r(40);
              border: r(4) solid #ababab;
              border-radius: 50%;
              display: block;
              position: absolute;
              right: r(-20);
              top: r(-10);
              background-color: $bg-white;
            }
          }
        }
      }
      .ft {
        width: 100%;
        height: r(350);
        position: relative;
        .counter-wrap {
          display: flex;
          justify-content: space-between;
          border-top: r(2) solid $border-gary;
          // padding-bottom: r(175);
          padding-top: r(48);
          h1 {
            font-size: r(42);
            color: $fc-gary;
          }
        }
        .btn-wrap {
          display: flex;
          justify-content: center;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          span {
            font-size: r(48);
            color: $fc-white;
            flex: 1;
            height: r(138);
            line-height: r(138);
            text-align: center;
          }
        }
      }
    }
    
    .popBox-filterSelParams {
      z-index: 10000;
      width: 87.5%;
      height: 100%;
      bottom: 0;
      right: 0;
      position: absolute;
      .hd {
        width: 100%;
        height: r(269);
        display: flex;
        flex-direction: column;
        border-bottom: r(2) solid $border-gary;
        .title {
          font-size: r(42);
          color: $fc-base;
          font-weight: normal;
          padding-left: r(27);
          line-height: 1;
          padding-top: r(78);
          padding-bottom: r(34);
        }
        .range-wrap {
          display: flex;
          align-items: center;
          margin-left: r(45);
          .range-title {
            font-size: r(36);
            color: $fc-title-gary;
            margin-right: r(32);
          }
          .range {
            display: flex;
            align-items: center;
            .connector {
              margin: 0 r(23);
              width: r(24);
              height: r(3);
              background-color: #333;
              display: inline-block;
            }
            .input {
              width: r(264);
              height: r(90);
              border-radius: r(15);
              background-color: $bg-gary-g;
              text-align: center;
              font-size: r(36);
              color: $fc-gary;
            }
          }
        }
      }
      .bd {
        max-height: 74.5%;
        overflow: auto;
      }
      .zone-title {
        width: 100%;
        height: r(90);
        display: flex;
        align-items: center;
        font-size: r(36);
        color: $fc-title-gary;
        margin-bottom: r(60);
      }
      .zone-wrap {
        border-bottom: r(2) solid $border-gary;
        &.expand {
          .zone-tit {
            .arrow {
              transform: rotate(180deg);
            }
          }
          .mainList {
            height: auto;
          }
        }
        .zone-tit {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: r(67);
          padding-bottom: r(34);
          h1 {
            font-weight: normal;
            font-size: r(42);
            color: $fc-base;
            line-height: r(52);
            line-height: 1;
          }
          .arrow {
            @include bg("../../dist/img/popBox_arrow_up.png");
            width: r(44);
            height: r(21);
            transition: all .7s;
          }
        }
        .mainList {
          display: flex;
          flex-wrap: wrap;
          height: r(127);
          overflow: hidden;
          transition: all .7s;
          li {
            width: r(275);
            height: r(86);
            border: r(2) solid $bg-gary-g;
            border-radius: r(15);
            flex-shrink: 0;
            text-align: center;
            line-height: r(84);
            font-size: r(42);
            color: $fc-base;
            margin-bottom: r(35);
            margin-right: r(27);
            background-color: $bg-gary-g;
            @include ellipsis;
            &:nth-child(3n) {
              margin-right: 0;
            }
            &.cur {
              border: r(2) solid $border-red;
              color: $fc-red;
              background-color: $bg-white;
            }
          }
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          li {
            width: r(275);
            height: r(86);
            flex-shrink: 0;
            margin-bottom: r(35);
            margin-right: r(27);
            list-style: none;
            position: relative;
            &:nth-child(3n) {
              margin-right: 0;
            }
            .label {
              border: r(2) solid $bg-gary-g;
              display: block;
              width: 100%;
              height: 100%;
              border-radius: r(15);
              text-align: center;
              line-height: r(84);
              font-size: r(42);
              color: $fc-base;
              background-color: $bg-gary-g;
              @include ellipsis;
            }
            .radioSel {
              position: absolute;
              width: 100%;
              height: 100%;
              opacity: 0;
              &:checked {
                &+.label {
                  border: r(2) solid $border-red;
                  color: $fc-red;
                  background-color: $bg-white;
                }
              }
            }
          }
        }
      }
      .ft {
        width: 100%;
        height: r(138);
        position: absolute;
        bottom: 0;
        right: 0;
        .counter-wrap {
          display: flex;
          justify-content: space-between;
          border-top: r(2) solid $border-gary;
          padding-top: r(48);
          h1 {
            font-size: r(42);
            color: $fc-gary;
          }
        }
        .btn-wrap {
          display: flex;
          justify-content: center;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          span {
            font-size: r(48);
            color: $fc-white;
            flex: 1;
            height: r(138);
            line-height: r(138);
            text-align: center;
          }
        }
      }
    }
    
    // 重置animated 时间
    .animated {
      -webkit-animation-duration: .35s!important;
      animation-duration: .35s!important;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    
    // 弹出框组件 counter样式
    .popBox-counter {
      display: flex;
      border: 1px solid $border-gary-dark;
      overflow: hidden;
      .reduce {
        width: r(68);
        height: r(65);
        text-indent: -9999em;
        box-sizing: border-box;
        @include bg('../../dist/img/popBox_reduce.png');
        background-size: r(33) r(5);
        border-right: 1px solid $border-gary-dark;
        border-left: none;
      }
      .add {
        @extend .reduce;
        @include bg('../../dist/img/popBox_add.png');
        background-size: r(33) r(33);
        border-right: none;
        border-left: 1px solid $border-gary-dark;
      }
      .input {
        width: r(98);
        height: r(65);
        border: none;
        appearance: none;
        border-radius: 0;
        text-align: center;
        font-size: r(42);
        color: $fc-base;
        box-sizing: border-box;
        display: block;
      }
    }